<template>
<div v-scroll="loadMore">
   <v-image-nav></v-image-nav>
   <v-image-show :items="imageList"></v-image-show>
</div>
</template>


<script>
      //import Indicator  from 'mint-ui';
export default {
  data() {
    return {
      imageList: [
        {
          id: 1,
          url: "#",
          title: "泰盈八千里 170平 现代（23张）",
          key: " 三室 | 现代 | 18万-30万 ",
          coverImg:
            "http://img.family.lccz.com/2017/1109/15102026449519327195.jpg"
        },
        {
          id: 2,
          url: "#",
          title: "泰盈八千里 170平 现代（23张）",
          key: " 三室 | 现代 | 18万-30万 ",
          coverImg:
            "http://img.family.lccz.com/2017/1109/15102026449519327195.jpg"
        },
        {
          id: 3,
          url: "#",
          title: "泰盈八千里 170平 现代（23张）",
          key: " 三室 | 现代 | 18万-30万 ",
          coverImg:
            "http://img.family.lccz.com/2017/1109/15102026449519327195.jpg"
        },
        {
          id: 4,
          url: "#",
          title: "泰盈八千里 170平 现代（23张）",
          key: " 三室 | 现代 | 18万-30万 ",
          coverImg:
            "http://img.family.lccz.com/2017/1109/15102026449519327195.jpg"
        }
      ]
    };
  },
  components: {
    vImageNav: () => import("../components/vImageNav"),
    VImageShow: () => import("../components/VImageShow")
  },
  methods: {
    loadMore: function() {  
      this.$indicator.open('加载中...'); 
      //console.log(this);
      var imageItem= {
          id: 5,
          url: "#",
          title: "泰盈八千里 170平 现代（23张）11111",
          key: " 三室 | 现代 | 18万-30万1111 ",
          coverImg:
            "http://img.family.lccz.com/2017/1109/15102026449519327195.jpg"
        };
      this.imageList.push(imageItem);
      this.$indicator.close();
    }
  },
  directives: {
    // 自定义指令
    scroll: {
      bind: function(el, binding) {
        window.addEventListener("scroll", function() {
          if (document.body.scrollTop + window.innerHeight >= el.clientHeight) {
            var fnc = binding.value;
            fnc();
             //console.log("scrollTop->"+document.body.scrollTop+"\n"+"innerHeight->"+window.innerHeight+"\n"+"clientHeight->"+el.clientHeight);
          }
        });
      }
    }
  }
};
</script>
